<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>文章内页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="css/cui.css"/>
    <link rel="stylesheet" href="css/lib.css"/>
    <link rel="stylesheet" href="css/style.css"/>
</head>
<body class="index">

<!-- 头部 -->
<section id="hd">
    <div class="hdl"><a onclick="history.back()" class="a-back"></a></div>
</section>
<!-- 头部 end-->


<!-- 主内容 -->
<section id="bd">

    <div class="m-txt1">
        <h1 v-text="detail.Title">运动，是为了超越自我</h1>
        <div class="inf">
            <!--<div class="pic"><img src="img/pic1.png" alt=""></div>-->
            <div class="txt">
                <!--todo 缺少发文章作者的信息 和发文章的时间-->
                <!--<h5 v-text="">弹指一梦</h5>-->
                <p>03-21 23:02</p>
            </div>
        </div>
        <!--<img src="img/pic7.jpg" alt="">-->
        <div v-html="detail.Content">

        </div>
        <!-- 点赞 -->
        <div class="m-like" v-if="!isAdvice"><a href="" @click.prevent="star"><i></i><span
                v-text="detail.StartCount"></span></a></div>
        <!-- 点赞 end-->
    </div>
</section>
<!-- 主内容 end-->


<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="js/lib.js"></script>
<script src="http://cdn.bootcss.com/vue/2.2.6/vue.min.js"></script>
<script src="http://cdn.bootcss.com/axios/0.15.3/axios.min.js"></script>
<script src="js/axios-config.js"></script>
<script>
    var param = parseQueryString(location.search);
    var id = param.id;
    var article = new Vue({
        el: '#bd',
        data: {
            detail: {},
            isAdvice: false
        },
        created: function () {
            var _ = this;
            if (typeof param.type !== "undefined") {
                this.isAdvice = true;
                axios.advice('/detail', {
                    id: id
                })
                    .then(function (res) {
                        _.detail = res.data.Detail;
                    })
            } else {
                axios.article('/detail', {
                    id: id
                })
                    .then(function (res) {
                        _.detail = res.data.Detail;
                        if (res.data.Code === 0) {
                            axios.article('/addbrowse', {
                                id: id
                            })
                        }
                    })
            }
        },
        methods: {
            star: function () {
                var _ = this;
                axios.article('/star', {
                    id: id
                })

                    .then(function (res) {
                        if (res.data.Code === 2) {
                            location.href = 'login.html?refer=' + location.href;
                        } else if (res.data.Code === 0) {
                            _.detail.StartCount += 1;
                            $('.m-like a').css('background-image', ' url(/img/star.png')
                        } else {
                            $('.m-like a').css('background-image', ' url(/img/star.png)')
                        }
                    })
            }
        }
    })
</script>
</body>
</html>